// component/shareMoments/popupShare/popupShare.js
var makeShareImg;
const app = getApp()
const util = require("../../utils/util.js");
Component({
    properties: {
        showModalStatus: {
            type: Boolean,
            value: false,
        },
        articleData: {
            type: Object,
            value: ''
        },
        image:{
            type:String,
            value:''
        }
    },
    data: {
        showModalStatus: false, //是否显示分享
        hidden: true,
        imagePath: '',
        res_guide: ''
    },

    observers: {
        "showModalStatus": function(showModalStatus) {
            if (showModalStatus)
                this.bindMenu2();
        }
    },

    methods: {
        // 分享菜单控制函数
        powerDrawer: function(e) {
            var currentStatu = e.currentTarget.dataset.statu;
            this.shareImage(currentStatu)
        },
        // 购买抽屉
        typeDrawer(e) {
            var type = e.currentTarget.dataset.type;
            var currentStatu = e.currentTarget.dataset.statu;
            
            this.shareImage(currentStatu, type)
        },
        // 分享动画
        shareImage(currentStatu, type) {
            /* 动画部分 */
            // 第1步：创建动画实例
            var animation = ks.createAnimation({
                duration: 200, //动画时长
                timingFunction: "linear", //线性
                delay: 0 //0则不延迟
            });
            // 第2步：这个动画实例赋给当前的动画实例
            this.animation = animation;
            // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停
            animation.translateY(240).step();
            // 第4步：导出动画对象赋给数据对象储存
            this.setData({
                animationData: animation.export()
            });
            // 第5步：设置定时器到指定时候后，执行第二组动画
            setTimeout(() => {
                // 执行第二组动画：Y轴不偏移，停
                animation.translateY(0).step();
                // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
                this.setData({
                    animationData: animation.export(),
                });
                //关闭抽屉
                if (currentStatu == "close") {
                    if (type) {
                        this.setData({
                            showTypeStatus: false
                        });
                    } else {
                        this.setData({
                            showModalStatus: false
                        });
                    }

                }
            }, 200);
            // 显示抽屉
            if (currentStatu == "open") {
                if (type)
                    this.setData({
                        showTypeStatus: true
                    });
                else
                    this.setData({
                        showModalStatus: true
                    });
            }
        },
        // 分享到朋友圈
        bindMenu2() {
            this.setData({
                showModalStatus: false,
                hidden: false
            })
            if (this.properties.articleData=='') {
                return
            }
                ks.showLoading({
                    title: '努力生成中...'
                })
            
            this.drawImageCanvas();
        },
        close() {
            this.setData({
                hidden: true,
            });
        },
        // 保存图片
        save() {
            var that = this;
            //生产环境时 记得这里要加入获取相册授权的代码
            ks.saveImageToPhotosAlbum({
                filePath: that.data.imagePath||that.properties.image,
                success(res) {
                    ks.showModal({
                        content: '图片已保存到相册，赶紧分享到朋友圈吧~',
                        showCancel: false,
                        confirmText: '好哒',
                        confirmColor: '#72B9C3',
                        success: function(res) {
                            if (res.confirm) {
                                that.setData({
                                    hidden: true,
                                })
                            }
                        }
                    })
                },
                fail(err) {
                    ks.showModal({
                        title: '提示',
                        content: '需要您授权保存相册',
                        showCancel: false,
                        success: modalSuccess => {
                            ks.openSetting();
                        }
                    })
                }
            });
            this.setData({
                actionSheetHidden: !this.data.actionSheetHidden
            })
        },
        // 画布 分享到朋友圈
        drawImageCanvas: function() {
            let that = this;
            let res_id = this.properties.articleData.id;
            let res_city = this.properties.articleData.city;
            let res_title = this.properties.articleData.title;
            let res_guide = this.properties.articleData.guide;
            that.setData({
                    res_guide,
                })
            util.requestQrcode(res_id, res_city).then(req => {
                // 画布
                const ctx = ks.createCanvasContext('myCanvas', that);
                var logoPath = '/images/share/bdb.png'
                var bgImgPath = '/images/share/bgimg1.png';
                var bgImgPath2 = '/images/share/bgimg2.png';
                var canvasHeight = (res_guide != '') ? 634 : 488;
                if (res_guide != '') {
                    ctx.drawImage(bgImgPath, 100, 200, 488, canvasHeight);
                    ctx.drawImage(logoPath, 125, 230, 96, 38);

                    this.drawText({
                            ctx: ctx, //画布上下文
                            fontColor: "#fff",
                            fontSize: 28, //字体大小
                            word: res_title, //需要处理的文字
                            maxWidth: 430, //一行文字最大宽度
                            x: 130, //文字在x轴要显示的位置
                            y: 280, //文字在y轴要显示的位置
                            maxLine: 2 //文字最多显示的行数
                        })
                        // 导语
                    ctx.setFillStyle('#2C2C2C'); // 文字颜色
                    ctx.setFontSize(28)
                        // ctx.fillText('导语', 130, 520);
                    this.drawText({
                            ctx: ctx, //画布上下文
                            fontColor: "#000",
                            fontSize: 25, //字体大小
                            word: res_guide, //需要处理的文字
                            maxWidth: 430, //一行文字最大宽度
                            x: 130, //文字在x轴要显示的位置
                            y: 500, //文字在y轴要显示的位置 530
                            maxLine: 3 //文字最多显示的行数
                        })
                        // ctx.drawImage(qrcode, 130, 685, 110, 110);
                    ctx.drawImage(req, 130, 665, 110, 110);
                    let codeText = "长按小程序二维码查看文章详情关注查看更多本地最新资讯";
                    this.drawText({
                        ctx: ctx, //画布上下文
                        fontColor: "#9E9E9E",
                        fontSize: 20, //字体大小
                        word: codeText, //需要处理的文字
                        maxWidth: 280, //一行文字最大宽度
                        x: 260, //文字在x轴要显示的位置
                        y: 680, //文字在y轴要显示的位置700
                        maxLine: 3 //文字最多显示的行数
                    })
                } else {
                    ctx.drawImage(bgImgPath2, 100, 200, 488, canvasHeight);
                    ctx.drawImage(logoPath, 130, 240, 96, 38);

                    this.drawText({
                        ctx: ctx, //画布上下文
                        fontColor: "#fff",
                        fontSize: 28, //字体大小
                        word: res_title, //需要处理的文字
                        maxWidth: 430, //一行文字最大宽度
                        x: 135, //文字在x轴要显示的位置
                        y: 290, //文字在y轴要显示的位置
                        maxLine: 2 //文字最多显示的行数
                    })

                    ctx.drawImage(req, 135, 500, 130, 130);
                    let codeText = "长按小程序二维码查看文章详情关注查看更多本地最新资讯";
                    this.drawText({
                        ctx: ctx, //画布上下文
                        fontColor: "#9E9E9E",
                        fontSize: 20, //字体大小
                        word: codeText, //需要处理的文字
                        maxWidth: 280, //一行文字最大宽度
                        x: 280, //文字在x轴要显示的位置
                        y: 530, //文字在y轴要显示的位置
                        maxLine: 3 //文字最多显示的行数
                    })
                }
                //绘制图片
                ctx.draw();
                setTimeout(() => {
                    ks.canvasToTempFilePath({
                        x: 100,
                        y: 200,
                        width: 488, // canvas 宽度
                        height: canvasHeight,
                        destWidth: 488 * 750 / ks.getSystemInfoSync().windowWidth * 2,
                        destHeight: canvasHeight * 750 / ks.getSystemInfoSync().windowWidth * 2,
                        canvasId: "myCanvas",
                        success: (res) => {
                            this.setData({
                                imagePath: res.tempFilePath,
                                // hidden: false,
                            })
                            
                            ks.getFileSystemManager().unlink({
                                filePath: req,
                            })
                            ks.hideLoading()
                        },
                    }, this)
                }, 100)
            })
        },

        //处理文字多出省略号显示
        drawText: function(options) {
            options.ctx.setFontSize(options.fontSize); //设置字体大小
            options.ctx.setFillStyle(options.fontColor); //设置字体颜色
            var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth); /*实际总共能分多少行*/
            var count = allRow >= options.maxLine ? options.maxLine : allRow; //实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数

            var endPos = 0; //当前字符串的截断点
            for (var j = 0; j < count; j++) {
                var nowStr = options.word.slice(endPos); //当前剩余的字符串
                var rowWid = 0; //每一行当前宽度    
                if (options.ctx.measureText(nowStr).width > options.maxWidth) { //如果当前的字符串宽度大于最大宽度，然后开始截取
                    for (var m = 0; m < nowStr.length; m++) {
                        rowWid += options.ctx.measureText(nowStr[m]).width; //当前字符串总宽度
                        if (rowWid > options.maxWidth) {
                            if (j === options.maxLine - 1) { //如果是最后一行
                                options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * (options.fontSize + 12)); //(j+1)*40这是每一行的高度        
                            } else {
                                options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * (options.fontSize + 12));
                            }
                            endPos += m; //下次截断点
                            break;
                        }
                    }
                } else { //如果当前的字符串宽度小于最大宽度就直接输出
                    options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * (options.fontSize + 12));
                }
            }
        },
    }

})